<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>设备组信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">

    <link rel="stylesheet" href="${ctx!}/assets/bower_components/amazeui/dist/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${ctx!}/assets/css/colddemo.css">
    <style>
        .dashed-box {position: absolute;z-index: 9997; border: 1px dashed red; width: 0px; height: 0px;left: 0px; top: 0px; overflow: hidden;}
        #moving_box {background-color: #0A90DB;}

        .question-border {z-index: 9999;border: 2px dashed red;overflow: hidden; }
        .del-box {
            width: 17px;
            height: 17px;
            float: right;
            position: relative;
            margin-top: 1px;
            margin-right: 1px;
            z-index: 99999999999;
        }

        .redpoint {
            width: 18px;
            height: 18px;
        }
        .clicklabel{
            position: absolute;
            /*top: 95.3625px;
            left: 56.08px;*/
            color: white;
            opacity: 0.8;
            width: 20px;
            height: 20px;
            background: white;
            font-size: 25px;
            white-space: nowrap;
            text-align: center;
        }
    </style>

</head>

<body class="gray-bg">
<div class="tabe_div"  style="padding-right: 0">
    <p class="p_line text_ient" ></p>
    <div style="display: inline" >
        <@shiro.hasPermission name="system:project:index">
        <a href="#" class="a_add" id="back" >返回</a>
        </@shiro.hasPermission>
<#--    <@shiro.hasPermission name="system:project:edit">-->
<#--    <a href="#" class="a_add" id="display_else_box" onclick="display_else();">隐藏其他设备组</a>-->
<#--    </@shiro.hasPermission>-->
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="startConf">配置</a>
    </@shiro.hasPermission>
<#--    <@shiro.hasPermission name="system:project:edit">-->
<#--    <a href="#" class="a_add" id="modifyConf">微调</a>-->
<#--    </@shiro.hasPermission>-->
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="resetConf" >不显示</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="stopConf" >保存</a>
    </@shiro.hasPermission>
    </div>

    <p class="p_line text_ient" ></p>
    <div>
        <form  id="frm" method="post" action="${ctx!}/admin/equipment/display/edit">
            <input type="hidden" id="id" name="id" value="${currEquipment.id}">
            <input type="hidden" id="display" name="display" value="${currEquipment.display}">
            <input type="hidden" id="x1" name="x1" value="${equipment.x1}">
            <input type="hidden" id="y1" name="y1" value="${equipment.y1}">
            <input type="hidden" id="x2" name="x2" value="${equipment.x2}">
            <input type="hidden" id="y2" name="y2" value="${equipment.y2}">
        </form>
    </div>
    <div>
<#--currEquipment.project.image    ${ctx!}/assets/img/show-test.gif    -->
        <img style="height: 500px; width: auto" src="${ctx}${currEquipment.project.image}" alt="" id="confPic">
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <table  id="table_list" class="table_style table-striped" style="margin: 0 auto" >
    </table>
</div>

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<#--图片-->
<#--<script src="${ctx!}/assets/bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="${ctx!}/assets/bower_components/amazeui/dist/js/amazeui.min.js"></script>
<script src="${ctx!}/assets/bower_components/MessengerJS/messenger.js"></script>
<script src="${ctx!}/assets/bower_components/layer/layer.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
<#--<script src="${ctx!}/assets/js/adminPicConfig.js"></script>-->

<script>

    $(document).ready(function () {
        var confPicPos = $("#confPic").offset();
        confPicPos["width"] = $("#confPic").width();
        confPicPos["height"] = $("#confPic").height();


        $("#startConf").on('click',function () {
            onBox();
        });


        $("#stopConf").on('click',function () {
            //unbind img event
            if($("#x1").val() == null ||  $("#x2").val() == null || $("#y1").val() == null ||  $("#y2").val() == null)
                $("#display").val(false);
            $('#confPic').off('click');
            console.log($("#frm").serialize());
            $.ajax({
                type: "POST",
                dataType: "json",
                // contentType:"application/json",
                url: "${ctx!}/admin/equipment/display/edit",
                data: $("#frm").serialize(),
                success: function(msg){
                    layer.msg(msg.message, {time: 2000},function(){
                        // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        // parent.layer.close(index);
                    });
                }
            });
        });

        $("#resetConf").on('click',function () {
            $("#display").val(false);
        });


        function stopDefault(e) {
            if(e && e.preventDefault)
                e.preventDefault();
            else
                window.event.returnValue = false;
            return false;
        }

        function onBox() {
            console.log("onBox");
            var wId = "equipment";
            var index = 0;
            var target = null;
            var startX = 0, startY = 0;
            var flag = false;
            var startL = 0, startT = 0, boxHeight = 0, boxWidth = 0;
            var boxObj = document.getElementById("confPic");
            var frame = $("#confPic");
            var referenceSize = {
                "pos": frame.offset(),
                "width": frame.outerWidth(),
                "height": frame.outerHeight()
            }
            var newMarkPos = {
                "left": startL, //按下时鼠标距离的左边的距离
                "top": startT  //按下时鼠标距离的上边的距离
            }
            //鼠标点击
            boxObj.onmousedown = function(e) {
                console.log("oBox--on");
                flag = true;
                var e = window.event || e;
                target = e.target || e.srcElement; //获取document 对象的引用
                //e.pageY，e.pageX兼容
                if(target.src) {
                    stopDefault(e)
                }
                var scrollTop = 0;
                var scrollLeft = boxObj.scrollLeft;
                var ePageX = e.clientX + scrollLeft;
                var ePageY = e.clientY + scrollTop;
                //按下时鼠标距离页面的距离
                startX = ePageX;
                startY = ePageY;
                //按下时鼠标距离的左边和上边的距离
                startL = startX - referenceSize.pos.left;
                startT = startY - referenceSize.pos.top;
                //index++;

                console.log("onbox top "+startT);


                var div = document.createElement("div");
                div.id = wId + index;
                div.className = "dashed-box";
                if(document.getElementById(wId + index)!=null)
                    boxObj.parentNode.removeChild(dragBox(wId + index));
                boxObj.parentNode.appendChild(div);
                div = null;

            }
            //鼠标离开
            boxObj.onmouseup = function(e) {
                console.log("oBox--off");
                var e = window.event || e;
                if(boxWidth >= 1 || boxHeight >= 1) {
                    boxObj.parentNode.removeChild(dragBox(wId + index));
                    //index++;
                    var div = document.createElement("div");
                    var spanObj = document.createElement("span");
                    spanObj.className = 'del-box';
                    div.appendChild(spanObj);
                    div.className = "question-box question-border clicklabel";
                    div.id = wId + index;
                    div.style.left = newMarkPos.left + "px";
                    div.style.top = newMarkPos.top +document.getElementById("confPic").offsetTop+ "px";
                    div.style.width = boxWidth + "px";
                    div.style.height = boxHeight + "px";
                    div.style.backgroundColor = "black";
                    console.log("oBox--over");
                    console.log("overbox top "+startT);
                    boxObj.parentNode.appendChild(div);

                    x1 = (newMarkPos.left/confPicPos["width"]).toFixed(4);
                    y1 = (newMarkPos.top/confPicPos.height).toFixed(4);
                    x2 = ((newMarkPos.left+boxWidth)/confPicPos.width).toFixed(4);
                    y2 = ((newMarkPos.top+boxHeight)/confPicPos.height).toFixed(4);
                    $("#x1").val(x1);
                    $("#y1").val(y1);
                    $("#x2").val(x2);
                    $("#y2").val(y2);
                    $("#display").val(true);

                    div = null;
                    boxWidth = 0;
                    boxHeight = 0;
                }
                flag = false;
            }
            //鼠标移动
            boxObj.onmousemove = function(e) {
                var e = window.event || e;
                stopDefault(e)
                if(flag) {
                    var scrollTop = 0;
                    var scrollLeft = boxObj.scrollLeft;
                    var ePX = e.clientX + scrollLeft;
                    var ePY = e.clientY + scrollTop;
                    var disW = ePX - startX;
                    var disH = ePY - startY;
                    var L = startL + disW;
                    var T = startT + disH;
                    if(disW > 0) {
                        if(L >= 0) {
                            boxWidth = disW
                        }
                        newMarkPos.left = startL;
                    } else {
                        if(L <= 0) {
                            L = 0;
                            boxWidth = startL;
                        }
                        boxWidth = (startL - L);
                        newMarkPos.left = L;
                    }
                    if(disH > 0) {
                        if(T >= 0) {
                            boxHeight = disH
                        }
                        newMarkPos.top = startT;
                    } else {
                        if(T <= 0) {
                            T = 0;
                            boxHeight = startT;
                        }
                        boxHeight = (startT - T)
                        newMarkPos.top = T;
                    }
                    dragBox(wId + index).style.left = newMarkPos.left + "px";
                    dragBox(wId + index).style.top = newMarkPos.top+ document.getElementById("confPic").offsetTop+ "px";
                    dragBox(wId + index).style.width = Math.abs(boxWidth) + "px";
                    dragBox(wId + index).style.height = Math.abs(boxHeight) + "px";
                    dragBox(wId + index).style.backgroundColor = "black";
                    stopDefault(e)

                    console.log("movebox top "+startT);
                }
            }
            var dragBox = function(id) {
                return document.getElementById(id);
            }
        }


        $("#back").on('click',function () {
            $("#navbar-header-title",window.parent.document).html("${currEquipment.project.name}&nbsp/&nbsp设备组管理");
            window.location.href = '${ctx!}/admin/equipment/index/${currEquipment.project.id}';

        });
    });


</script>


</body>

</html>
